<template>
	<div id="history">
		<el-form :inline="true" :model="searchHistoryForm" class="demo-form-inline">
			<el-button type="primary" @click="deleteRow">批量删除</el-button>
			<el-button type="primary" @click="preSaveHistory">添加送水历史</el-button>
			&nbsp;&nbsp;&nbsp;
			<el-form-item label="搜索时间段">
				<el-date-picker v-model="searchHistoryForm.beginDate" value-format="yyyy-MM-dd"></el-date-picker>
				~
				<el-date-picker v-model="searchHistoryForm.endDate" value-format="yyyy-MM-dd"></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="listHistory">搜索</el-button>
			</el-form-item>
		</el-form>
		<el-table :data="hisList" stripe style="width: 100%" ref="multipleSelectable"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55"></el-table-column>
			<el-table-column prop="hid" label="送水历史编号" width="180">
			</el-table-column>
			<el-table-column prop="worker.workerName" label="送水工名称" width="180">
			</el-table-column>
			<el-table-column prop="customer.custName" label="客户名称" width="180">
			</el-table-column>
			<el-table-column prop="sendWaterTime" :formatter="dateFormat" label="送水时间" width="180">
			</el-table-column>
			<el-table-column prop="sendWaterCount" label="送水数量" width="180">
			</el-table-column>
			<el-table-column label="操作" width="200px">
				<template slot-scope="scope">
					<!-- 删除按钮 -->
					<el-button type="primary" icon="el-icon-delete">
					</el-button>
					<!-- 修改按钮 -->
					<el-button type="danger" icon="el-icon-edit">
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination background layout="sizes,prev, pager, next,jumper,->,total" :page-size.sync="pageSize"
			:current-page.sync="pageNum" :page-sizes="[5,10,20]" :total="total" :hide-on-single-page="true"
			@current-change="listHistory" @size-change="listHistory">
		</el-pagination>

		<!--
			“添加送水历史”对话框
			addBox是一个标志变量：true显示对话框，否则隐藏对话框
			handleClose：对话框关闭之前执行的动作
			addHistoryDataForm是一个表单，用来存放要添加的送水历史数据
		 -->
		<el-dialog title="添加送水历史" :visible.sync="addBox" width="50%" :before-close="handleClose">
			<el-form ref="addCustDataForm" label-width="100px" v-model="addHistoryDataForm">
				<el-form-item label="送水工名称:">
					<el-select v-model="addHistoryDataForm.wid">
						<el-option v-for="(worker, index) in workerList" :value="worker.wid" :key="worker.wid"
							:label="worker.workerName"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="客户名称:">
					<el-select v-model="addHistoryDataForm.cid">
						<el-option v-for="(customer, index) in custList" :value="customer.cid" :key="customer.cid"
							:label="customer.custName"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="送水时间:">
					<el-date-picker v-model="addHistoryDataForm.sendWaterTime"></el-date-picker>
				</el-form-item>
				<el-form-item label="送水数量:">
					<el-input placeholder="请输入水票数量" maxlength="50" v-model="addHistoryDataForm.sendWaterCount" />
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="saveHistory">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				hisList: [],
				workerList: [],
				custList: [],
				// “添加送水历史”对话框 隐藏和显示的标志变量，false表示隐藏
				addBox: false,
				// “添加客户”对话框的表单
				addHistoryDataForm: {
					wid: '',
					cid: '',
					sendWaterTime: '',
					sendWaterCount: ''
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				// 新增加 总行数、当前页、每页个数
				total: 0,
				pageNum: 1,
				pageSize: 5,
				// 日期搜索表单内开始时间和结束时间
				searchHistoryForm: {
					beginDate: '',
					endDate: ''
				},
				//存放删除的数据
				idList: '',
				//多选的数据
				multipleSelection: [],
			}
		},
		methods: {
			dateFormat: function(row, column) {
				let date = row[column.property];
				if (date == undefined) {
					return ''
				};
				return this.$moment(date).format("YYYY-MM-DD")
			},

			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			deleteRow() {
				const length = this.multipleSelection.length;
				for (let i = 0; i < length; i++) {
					this.idList += "," + this.multipleSelection[i].hid;
				}
				let formData = new FormData();
				formData.append('idList', this.idList);
				this.$confirm("确定要删除吗", "提示", {
					confirmButtonText: '确定',
					cannelButtonText: '取消',
					type: '警告'
				}).then(() => {
					this.$axios.post('http://localhost:8097/history/batchDelete', formData).then((resp) => {
						if (resp.data.responseMessage == 'ok') {
							this.$message.success("批量删除成功");
						} else {
							this.$message.error("批量删除失败");
						}
						this.listHistory();
					}).catch((error) => {
						console.log(error);
						this.$message.error("批量删除请求失败");
					})
				})
			},

			ListHistoryBySearch() {
				let formData = new FormData();
				let formatBeginDate = this.$moment(this.searchHistoryForm.beginDate).format("YYYY-MM-DD");
				let formatEndDate = this.$moment(this.searchHistoryForm.endDate).format("YYYY-MM-DD");
				formData.append('beginDate', formatBeginDate);
				formData.append('endDate', formatEndDate);
				this.$axios.get('http://localhost:8097/history/searchHistory/' + this.pageNum + "/" + this.pageSize + "/" +
					formatBeginDate + "/" + formatEndDate).then((resp) => {
					this.hisList = resp.data.responseData.list;
					this.total = resp.data.responseData.total;
					this.pageNum = resp.data.responseData.pageNum;
				}).catch((error) => {
					console.log(error);
					this.$message.error("送水历史请求发送失败");
				})
			},

			ListAllHistory() {
				this.$axios.get('http://localhost:8097/history/listHistoryPage/' + this.pageNum + "/" + this.pageSize)
					.then((resp) => {
						this.hisList = resp.data.responseData.list;
						this.total = resp.data.responseData.total;
						this.pageNum = resp.data.responseData.pageNum;
					}).catch((error) => {
						console.log(error);
						this.$message.error("送水历史请求发送失败");
					})
			},

			listHistory() {
				if (this.searchHistoryForm.beginDate != null && this.searchHistoryForm.beginDate.length != 0) {
					this.ListHistoryBySearch();
				} else {
					this.ListAllHistory();
				}
			},

			// 清空添加列表内所有信息
			clearHistoryModel() {
				this.addHistoryDataForm.workerName = '';
				this.addHistoryDataForm.custName = '';
				this.addHistoryDataForm.sendWaterTime = '';
				this.addHistoryDataForm.sendWaterCount = '';
			},
			// 预添加送水历史信息，弹出“添加送水历史”对话框
			preSaveHistory() {
				this.clearHistoryModel();
				this.$axios.get('http://localhost:8097/history/preSaveHis').then((resp) => {
					this.workerList = resp.data.responseData.workerList;
					this.custList = resp.data.responseData.customerList;
				}).catch((error => {
					this.$message.error("向后端发送请求失败");
					console.log(error);
				}))
				this.addBox = true;
			},
			// 关闭对话框之前的动作
			handleClose(done) {
				this.clearHistoryModel();
				done();
			},
			// 提交对话框送水历史信息
			saveHistory() {
				this.$axios.post('http://localhost:8097/history/saveHis', {
					worker: {
						wid: this.addHistoryDataForm.wid
					},
					customer: {
						cid: this.addHistoryDataForm.cid
					},
					sendWaterTime: this.addHistoryDataForm.sendWaterTime,
					sendWaterCount: this.addHistoryDataForm.sendWaterCount
				}).then((resp) => {
					if (resp.data.responseMessage == 'ok') {
						this.$message.success("添加成功");
					} else {
						this.$message.error("添加失败，客户水票不够");
					}
					this.listHistory();
					this.addBox = false;
				}).catch((error) => {
					this.$message.error("添加送水历史信息请求失败");
					console.log(error);
				})
			}
		},
		created() {
			this.listHistory();
		}
	}
</script>

<style>
</style>
